<template>
  <div class="wrap">
      <div class="nav">
          <div class="btn">
              <div class="btn-item"></div>
              <div class="btn-item"></div>
              <div class="btn-item"></div>
          </div>
          <div class="icon">
            <div class="icon-img"><img src="../../static/img/default_avatar.jpg" alt=""></div>
            <div class="icon-con">
                <p>Good Day</p>
                <h2>{{userId}}</h2>
            </div>
        </div>
        <div class="line"></div>
        <div class="title">
            <p>menu</p>
        </div>
        <div class="menu">
            <div class="item" :class="menuSelected==1?'active':''" @click="goto(0)">
                <div class="light"></div>
                <div class="licon">
                    <span class="iconfont icon-shouye"></span>
                </div>
                <div class="con">首页</div>
                <div class="ricon">
                    <span class="iconfont icon-shouye"></span>
                </div>
            </div>
            <div class="item" :class="menuSelected==2?'active':''"  @click="goto(1)">
                <div class="light"></div>
                <div class="licon">
                    <span class="iconfont icon-cangkucangchu"></span>
                </div>
                <div class="con">库存管理</div>
                <div class="ricon">
                    <span class="iconfont icon-cangkucangchu"></span>
                </div>
            </div>
            <div class="item" :class="menuSelected==3?'active':''"  @click="goto(2)">
                <div class="light"></div>
                <div class="licon">
                    <span class="iconfont icon-dingdan_dingdanliebiao"></span>
                </div>
                <div class="con">订单管理</div>
                <div class="ricon">
                    <span class="iconfont icon-dingdan_dingdanliebiao"></span>
                </div>
            </div>
            <div class="item"   @click="loginOut">
                <div class="light"></div>
                <div class="licon">
                    <span class="iconfont icon-tuichudenglu"></span>
                </div>
                <div class="con">退出登录</div>
                <div class="ricon">
                    <span class="iconfont icon-dingdan_dingdanliebiao"></span>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <div class="title">
            <p>sever</p>
        </div>
        <div class="serve">
            <div class="item">
                <div class="licon">
                    <span class="iconfont icon-shezhi"></span>
                </div>
                <div class="con">设置</div>
                <div class="ricon"></div>
            </div>
            <div class="item" @click="meetUs">
                <div class="licon">
                    <span class="iconfont icon-lianxiwomen"></span>
                </div>
                <div class="con">联系我们</div>
                <div class="ricon"></div>
            </div>
        </div>
      </div>
  </div>
    <el-dialog
        v-model="dialogVisible"
        title="联系我们"
        width="30%"
        >
        <span>邮箱：1124026912@qq.com</span>
        <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"
            >确定</el-button
            >
        </span>
        </template>
    </el-dialog>

</template>

<script lang='ts'>
import { ref, watchEffect } from 'vue-demi'
import { useStore } from 'vuex'
import router from '@/router'

export default {
    setup(){
        let store = useStore();
        let userId = ref(store.getters.getUserId)
        watchEffect(()=>{
            userId.value = store.getters.getUserId
        })
        let menuSelected = ref(1)
        watchEffect(()=>{
            if(router.currentRoute.value.path=='/home/first'){
                menuSelected.value=1;
            }else if(router.currentRoute.value.path=='/home/warehouse'){
                menuSelected.value=2;
            }else if(router.currentRoute.value.path=='/home/order'){
                menuSelected.value=3;
            }
        })
        let goto = function(path:number):void{
            let toPath = '';
            if(path==0){
                toPath = '/home/first'
            }else if(path==1){
                toPath = '/home/warehouse'
            }else if(path==2){
                toPath = '/home/order'
            }
           router.push({path:toPath}) 
        }  
        //联系按键
        let dialogVisible = ref(false)
        function meetUs(){
            dialogVisible.value = true
        }
        //退出登录
        function loginOut(){
            store.dispatch('setLoginState',0)
            localStorage.removeItem("TOKEN");
            store.dispatch('setToken','')
            store.dispatch('setUserId','')
            router.push('/login')
        }
        return {
            menuSelected,
            goto,
            dialogVisible,
            meetUs,
            loginOut,
            userId
        }
    }
}
</script>

<style scoped>
    *{
        box-sizing: border-box;
        
    }
    .wrap{
        font-size: 18px;
        color:#808080;
        /* height: 100%; */
        /* width:100%; */
        height: 100%;
        /* background: cadetblue; */
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        /* position: fixed; */
        /* float: left; */

    }
    @media (max-width:980px) {
        .wrap{
            display: none;
        }
    }   
    .nav{
        width: 110px;
        /* width: 280px; */
        height: 100vh;
        background: rgba(0,0,0,0.8);
        /* border-radius: 0 20px 20px 0; */
        /* border-radius: 20px; */
        overflow: hidden;
        transition: 0.5s;
    }
    .nav:hover{
        width: 280px;
    }
    .btn{
        width: 60px;
        height: 10px;
        display: flex;
        justify-content: space-around;
        margin-left: 25px;
        margin-top:25px;
    }
    .btn-item{
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .btn-item:nth-child(1){
        background: #eb5a56;
    }
    .btn-item:nth-child(2){
        background: #f8bc33;
    }
    .btn-item:nth-child(3){
        background: #62cb44;
    }
    .icon{
        width: 250px;
        height: 60px;
        margin-left: 25px;
        margin-top: 20px;
        display: flex;
    }
    .icon-img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border:4px solid rgba(255,255,255,0.3);
        overflow: hidden;
    }
    .icon-img img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }
    .icon-con{
        height: 60px;
        margin-left: 25px;
    }
    .icon-con p{
        padding-top: 5px;
        margin-bottom: 5px;
    }
    .icon-con h2{
        font-weight: 400;
        font-size: 22px;
    }
    .line{
        width: 60px;
        height: 1px;
        background: rgba(255,255,255,0.5);
        margin: 20px 25px;
        transition: 0.5s;
    }
    .nav:hover .line{
        width: 230px;
    }
    .title{
        width:60px;
        margin-left: 25px;
        margin-bottom: 20px;
    }
    .title p{
        font-size: 14px;
    }
    .menu{
        width: 230px;
        margin-left:25px
    }
    .item{
        display: flex;
        position: relative;
        transition: 0.5s;
        border-radius: 6px;
        cursor: pointer;
        margin-bottom: 10px;
    }
    /* need change */
    .item:hover {
        background: rgba(255,255,255,0.1) !important;
    }
    .active{
        background: rgba(255,255,255,0.1)
    }
    .licon{
        width: 60px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .con{
        width: 0;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        overflow: hidden;
        position: relative; 
        left: -20px;
        opacity: 0;
    } 
    .nav:hover .con{
        width: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
    }
    .ricon{
        width: 0;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        overflow: hidden;
        opacity: 0;
    }
    .nav:hover .ricon{
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
    }
    .iconfont{
        font-size: 26px;
    }
    .ricon .iconfont{
        font-size: 20px;
        color:#62cb44;
    }
    .light{
        width: 6px;
        height: 50px;
        background: #eb5a56;
        position:absolute;
        left: -25px;
        transition: 0.5s;
        border-top-right-radius:4px;
        border-bottom-right-radius:4px;
        opacity: 0;
    }
    .item:hover .light{
        opacity: 1;
    }
    .serve{
        width: 60px;
        background: rgba(0,0,0,0.6);
        margin-left: 25px;
        overflow: hidden;
        border-radius: 6px;
        transition: 0.5s;
    }
    .nav:hover .serve{
        width: 230px;
    }
</style>